<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="../node_modules/jquery/dist/jquery.min.js"></script> -->
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../dist/pandyle.js"></script>
</head>

<body>
    <div class="main">
        <!-- <input type="hidden" name="id" value="123456">
        <input type="hidden" name="uid" value="17">
        <p>
            <span>姓名：</span><input type="text" name="base.name">
        </p>
        <p>
            <span>身份证号：</span><input type="text" name="base.card">
        </p>
        <p>
            <span>性别：</span>
            <label>
                <input type="radio" name="base.sex" value="1">
                <span>男</span>
                <input type="radio" name="base.sex" value="2">
                <span>女</span>
            </label>
        </p>
        <p>
            <span>爱好：</span>
            <input type="checkbox" name="other.attr.hobbies" value="football">
            <span>足球</span>
            <input type="checkbox" name="other.attr.hobbies" value="sing">
            <span>唱歌</span>
            <input type="checkbox" name="other.attr.hobbies" value="swim">
            <span>游泳</span>
        </p>
        <p>
            <span>用户类型：</span>
            <select name="other.attr.type">
                <option value="1" selected>普通用户</option>
                <option value="2">vip用户</option>
                <option value="3">超级vip用户</option>
            </select>
        </p> -->
        <div p-each="@window.radios">
            <p>
                <span>{{name}}：</span>
                <div p-com="radio"></div>
            </p>
        </div>
        <button onclick="test()">test</button>
        <button onclick="update()">update</button>
    </div>

    <script>
        var radios = [{
            name: 'level',
            selects: [{
                content: '一级',
                value: '1'
            }, {
                content: '二级',
                value: '2'
            }, {
                content: '三级',
                value: '3'
            }]
        }, {
            name: 'job',
            selects: [{
                content: '学生',
                value: 'student'
            }, {
                content: '就业',
                value: 'work'
            }, {
                content: '失业',
                value: 'nowork'
            }]
        }]

        Pandyle.config({
            comPath: {
                'Default': '/demo/components/{name}.html'
            }
        })

        $('.main').vm({});

        function test() {
            console.log($('.main').inputs().data());
        }

        function update() {
            $('.main').inputs().set({
                'base.name': 'rrr',
                'base.sex': '1',
                'other.attr.hobbies': ['swim', 'sing'],
                'other.attr.type': '2',
                'job': 'student',
                'level': '1'
            })
        }
    </script>
</body>